<template>
  <div class="bil-box order-box">
    <div class="bil-choose-box">
      <div class="fleft choose-input-box">
        <span size="30" class="iconfont icon-sousuo"></span>
        <input maxlength="15" type="text" class="choose-input" placeholder="请输入订单号" v-model="orderID" />
      </div>
      <div class="fright sx-text" @click="showtimediv">筛选</div>
      <!-- <div class="fright sx-text" @click="showfenlei">分类</div> -->
      <div class="_clear"></div>
    </div>
    <div class="bil-sy-box">
      <div class="title-box">
        <p class="title">{{date}}收益</p>
      </div>

      <mu-row gutter class="e-money-box">
        <mu-col span="6">
          <div class="grid-cell">
            <p class="em-title">收益总额</p>
            <p class="em-number">¥{{money}}</p>
          </div>
        </mu-col>
        <mu-col span="6">
          <div class="grid-cell">
            <p class="em-title">订单数量</p>
            <p class="em-number">{{ordernum}}</p>
          </div>
        </mu-col>
      </mu-row>
    </div>
    <div class="use-box List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <mu-list-item v-for="(item,index) in orderList" :key="index">
            <mu-list-item-content>
              <mu-list-item-title>
                <div class="order-title">
                  <span class="fleft">单号: {{item.ordernumber}}</span>
                  <span class="fright money" style="font-weight: bold">¥{{item.price}}</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-sec-title">
                  <span class="fleft createtime">用户名:{{item.userName}}</span>
                  <span class="fright status">{{item.orderstate}}</span>

                  <div class="_clear"></div>
                </div>
                <div class="order-sec-title">
                  <span class="fleft createtime">手机号:{{item.mobile}}</span>

                  <div class="_clear"></div>
                </div>
              </mu-list-item-title>
              <mu-list-item-sub-title>
                <div class="fleft order-timebox order-title">
                  <div class="time-title">开始时间</div>
                  <div class="time-des">{{item.starttime}}</div>
                </div>
                <div class="hour-box">
                  <span class="hour">{{item.hour}}h</span>
                </div>

                <div class="fright order-timebox order-title">
                  <div class="time-title">结束时间</div>
                  <div class="time-des">{{item.endtime}}</div>
                </div>
                <div class="_clear"></div>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </mu-load-more>
      <div v-show="nolist" class="nolist">
        <span class="iconfont icon-charging"></span>
        <p>暂无订单记录</p>
      </div>
    </div>
    <van-popup v-model="flshow" position="top" class="bottom-picker">
      <div class="fl-box">
        <div class="fl-title-box">
          <p>我的收益</p>
        </div>
        <div class="time-box">
          <mu-row gutter>
            <mu-col
              span="4"
              v-for="(item,index2) in incomeList"
              :key="index2"
              :class="{ checkprot:index2==income}"
              @click="checkincome(index2,item.id)"
            >
              <div class="grid-cell">
                {{item.title}}
                <input
                  type="radio"
                  name="time-id"
                  :checked="index2==income"
                  :value="item.id"
                />
              </div>
            </mu-col>
          </mu-row>
        </div>
        <div class="fl-title-box">
          <p>用户消费</p>
        </div>
        <div class="time-box">
          <mu-row gutter>
            <mu-col
              span="4"
              v-for="(item,index) in consumeList"
              :key="index"
              :class="{ checkprot:index==consume}"
              @click="checkconsume(index,item.id)"
            >
              <div class="grid-cell">
                {{item.title}}
                <input
                  type="radio"
                  name="time-id"
                  :checked="index==consume"
                  :value="item.id"
                />
              </div>
            </mu-col>
          </mu-row>
        </div>
        <mu-button class="btn">确定</mu-button>
      </div>
    </van-popup>
    <choose ref="choose" v-on:chooseDate="shaixuan"></choose>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import "vant/lib/popup/style/index";
import choose from "@/components/global/choose";
Vue.use(Popup);
export default {
  data() {
    return {
      date: "今日",
      orderID: "",
      ordernum: "",
      money: "",
      nolist: true,
      flshow: false,
      income: 0,
      consume: 0,
      startTime: "",
      endTime: "",
      num: 5,
      loaded_all: false,
      refreshing: false,
      loading: false,
      choosedata: {
        plot: "",
        startTime: "",
        endTime: "",
        state: "",
        parkid: ""
      },
      consumeList: [
        { id: 0, title: "全部" },
        { id: 1, title: "消耗电量" },
        { id: 2, title: "退费金额" },
        { id: 3, title: "消费纸巾包" },
        { id: 4, title: "刷卡消费额" },
        { id: 5, title: "使用时长" },
        { id: 6, title: "消费金额" },
        { id: 7, title: "实际消费" }
      ],
      incomeList: [
        { id: 0, title: "全部" },
        { id: 1, title: "线下投币" },
        { id: 2, title: "充值卡" },
        { id: 3, title: "广告" },
        { id: 4, title: "充值" }
      ],
      orderList: []
    };
  },
  components: {
    choose: choose
  },
  mounted() {
    if(this.$route.query.date){
     this.choosedata.endTime = this.$route.query.date
      this.choosedata.startTime = this.$route.query.date
    }
    this.getList();
    this.getData();
  },
  methods: {
    showtimediv() {
      this.$refs.choose.Showchoosediv();
    },
    showfenlei() {
      this.flshow = true;
    },
    checkincome(index, id) {
      this.income = index;
    },
    checkconsume(index, id) {
      this.consume = index;
    },
    shaixuan(somedata) {
      this.choosedata.plot = somedata.xiaoquId;
      this.choosedata.startTime = somedata.stime;
      this.choosedata.endTime = somedata.etime;
      this.choosedata.parkid = somedata.parkid;
      this.choosedata.state = somedata.state;

      if (new Date(somedata.stime).getTime() != new Date(somedata.etime).getTime()) {
        this.date = somedata.stime + " 至 " + somedata.etime + "   ";
      } else if (new Date(somedata.stime).getTime() == new Date(somedata.etime).getTime() ) {
        this.date = somedata.stime;
      }

      this.getList();
      this.getData();
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.getList();
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 3;
        this.getList();
      }, 2000);
    },
    getData() {
      this.$api
        .getDayProfit({
          startTime: this.choosedata.startTime,
          endTime: this.choosedata.endTime,
          plot: this.choosedata.plot,
          parkid: this.choosedata.parkid,
          ordernumber: this.orderID
        })
        .then(res => {
          this.money = res.data.data.sumOrdergold;
          this.ordernum = res.data.data.sumOders;
        });
    },
    getList() {
      this.$api
        .getOrderList({
          startTime: this.choosedata.startTime,
          endTime: this.choosedata.endTime,
          plot: this.choosedata.plot,
          parkid: this.choosedata.parkid,
          state: this.choosedata.state,
          ordernumber: this.orderID,
          pageNo: 1,
          pageSize: this.num
        })
        .then(res => {
          if (res.data != "") {
            if (res.data.message.code == 0) {
              this.orderList = res.data.data.records;
              console.log(this.orderList);
              this.nolist = false;
              if (res.data.data.pages == 1) {
                Toast("已加载全部数据");
                this.loaded_all = true;
              }
            }
          }
        });
    }
  },
  watch: {
    orderID: function() {
      this.getList();
      this.getData();
    },
    orderList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  }
};
</script>

<style>
</style>
